<template>
	<view>
		<login></login>
		<!-- 顶部导航 -->
		<!-- v-if="navBarShowTag" -->

		<view class="part1">
			<view class="paging">
				<view class="paging1" @tap="swiperChange(0)">
					<text :class="currentSwiperIndex === 0?'fSize':'fSize1'">全部</text>
					<view :class="currentSwiperIndex === 0?'span':'span1'"></view>
				</view>
				<view class="paging1" @tap="swiperChange(1)">
					<text :class="currentSwiperIndex === 1?'fSize':'fSize1'">代交易</text>
					<view :class="currentSwiperIndex === 1?'span':'span1'"></view>
				</view>
				<view class="paging1" @tap="swiperChange(2)">
					<text :class="currentSwiperIndex === 2?'fSize':'fSize1'">已交易</text>
					<view :class="currentSwiperIndex === 2?'span':'span1'"></view>
				</view>
			</view>
		</view>
		<view class="part2">
			<swiper class="swiper-box" :style="'height:'+ swiperSliderHeight" :current="currentSwiperIndex"
				@animationfinish="swiperSlider">

				<swiper-item class="swiper-item">
					<view class="connent" v-for="(item,index) in list1" :key="index">
						<view class="user">
							<view class="userPic">
								<image :src="item.avatar" mode=""
									style="width: 60rpx;height: 60rpx; border-radius: 50%;"></image>
							</view>
							<text>{{item.name}}</text>
						</view>
						<view class="product">
							<view class="productPic">
								<image :src="item.cover[0]" mode="" class="pic"></image>
							</view>
							<view class="productMsg">
								<view class="message1">
									<text>{{item.message1}}</text>
								</view>
								<view class="message2">
									实际交易：
									<text>{{item.message2}}</text>
									<text> ￥{{item.message3}}</text>
								</view>
							</view>
						</view>
						<view class="btn">
							<button type="default" @click="delect(item._id)">删除</button>
							<button type="default" style="background-color: #FFFFFF;color: #000000;"
								@click="find(item._id)">查看</button>
							<button type="default" style="background-color: #18B566;" @click="pay(index)">支付</button>
							<!-- <button type="default" v-if="true">提醒发货</button>
							<button type="default" v-if="true">交易完成</button> -->
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="connent" v-for="(item,index) in list2" :key="index" style="background-color: #FCBD71;">
						<view class="user">
							<view class="userPic">
								<image :src="item.avatar" mode=""
									style="width: 60rpx;height: 60rpx; border-radius: 50%;"></image>
							</view>
							<text>{{item.name}}</text>
						</view>
						<view class="product">
							<view class="productPic">
								<image :src="item.cover[0]" mode="" class="pic"></image>
							</view>
							<view class="productMsg">
								<view class="message1">
									<text>{{item.message1}}</text>
								</view>
								<view class="message2">
									实际交易：
									<text>{{item.message2}}</text>
									<text> ￥{{item.message3}}</text>
								</view>
							</view>
						</view>
						<view class="btn">
							<button type="default" style="background-color: #FFFFFF;color: #000000;width: 160rpx;"
								@click="getOrder(item._id)">查看订单</button>
							<button type="default" style="background-color: #FA3534;width: 160rpx;"
								@click="payFinish(index)">交易完成</button>
							<!-- <button type="default" v-if="true">提醒发货</button>
							<button type="default" v-if="true">交易完成</button> -->
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="connent" v-for="(item,index) in list3" :key="index" style="background-color: #19BE6B;">
						<view class="user">
							<view class="userPic">
								<image :src="item.avatar" mode=""
									style="width: 60rpx;height: 60rpx; border-radius: 50%;"></image>
							</view>
							<text>{{item.name}}</text>
						</view>
						<view class="product">
							<view class="productPic">
								<image :src="item.cover[0]" mode="" class="pic"></image>
							</view>
							<view class="productMsg">
								<view class="message1">
									<text>{{item.message1}}</text>
								</view>
								<view class="message2">
									实际交易：
									<text>{{item.message2}}</text>
									<text> ￥{{item.message3}}</text>
								</view>
							</view>
						</view>
						<view class="btn">
							<button type="default" @click="delect3(item._id)">删除</button>
							<button type="default" style="background-color: #FFFFFF;color: #000000;"
								@click="find(item._id)">查看</button>
							<button type="default" style="background-color: #FA3534;color: #000000;"
								@click="pay(index)">评价</button>
							<!-- <button type="default" v-if="true">提醒发货</button>
							<button type="default" v-if="true">交易完成</button> -->
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="part3" v-if="payShow">
			<view class="part3-1">
				<view @click="closePay">
					<image src="@/../static/关闭.png"></image>
				</view>
				<text style="font-size: 32rpx;font-weight: 600;color: #366092;">
					使用密码</text>
			</view>
			<view class="part3-2">
				<view>
					<text style="font-size: 32rpx;font-weight: 400;">微信支付</text>
				</view>
				<text style="font-size: 62rpx;font-weight: 600;">￥{{payPrice}}</text>
			</view>
			<view class="part3-3">
				<text>付款方式</text>
				<view class="payway">
					<image src="@/static/零钱.png"></image>
					<text>余额></text>
				</view>
			</view>
			<button type="default" @click="paySuccess">确认支付</button>
		</view>





	</view>
</template>

<script>
	const DB = wx.cloud.database();
	export default {
		created() {
			uni.$on('getId', (id) => {
				this.id = id
				this.getcart1()
			})
			this.getcart1()
			uni.$on("cartUpdate", () => {
				console.log("000000")
				this.getcart1()
				uni.pageScrollTo({
					duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
					scrollTop: 300 * this.list1.length + 100, //滚动到目标位置
				})
			})
		},

		data() {
			return {
				navBarShowTag: false,
				swiperSliderHeight: "",
				high: 0,
				currentSwiperIndex: 0,
				// 记录滚动所在的位置
				oldList1ScrollTop: 0,
				oldList2ScrollTop: 0,
				oldList3ScrollTop: 0,
				id: '',

				list1: [],
				list2: [],
				list3: [],
				payShow: false,
				payPrice: "",
				payData: {},
			}
		},
		onPageScroll(event) {
			if (this.currentSwiperIndex === 0) {
				this.oldList1ScrollTop = event.scrollTop
			} else if (this.currentSwiperIndex === 1) {
				this.oldList2ScrollTop = event.scrollTop
			} else if (this.currentSwiperIndex === 2) {
				this.oldList3ScrollTop = event.scrollTop
			}
		},
		methods: {
			getcart1() {
				DB.collection('shopcart01').doc(this.id)
					.get({
						success: (res) => {
							console.log(res.data.all, "查询成功")
							this.list1 = res.data.all
							this.list2 = res.data.run
							this.list3 = res.data.finish
							this.swiperSliderHeight = this.list1.length * 360 + 100 + 'rpx'
							console.log("list1", this.list1.length)
						},
						fail: (res) => {
							console.log("查询失败")
						}
					})
			},

			delect(index) {
				const _ = DB.command
				DB.collection('shopcart01').doc(this.id).update({
					data: {
						all: _.pull({
							_id: _.eq(index)
						}),
					},
					success: (res) => {
						console.log("删除成功！", res)
						DB.collection('shopcart01').doc(this.id)
							.get({
								success: (res) => {
									console.log(res.data.all, "查询成功")
									this.list1 = res.data.all
								},
								fail: (res) => {
									console.log("查询失败")
								}
							})
					},
					fail: (res) => {
						console.log("删除失败")
					}
				})
			},
			pay(index) {
				console.log(index)
				this.payShow = true
				DB.collection('shopcart01').
				doc(this.id).get({
					success: (res) => {
						console.log(res.data.all, "查询成功")
						this.payPrice = res.data.all[index].message3
						this.payData = res.data.all[index]
					},
					fail: (res) => {
						console.log("查询失败")
					}
				})
			},
			closePay() {
				this.payShow = false
			},
			paySuccess(index) {
				const _ = DB.command
				DB.collection('shopcart01').doc(this.id).update({
					data: {
						run: _.push(this.payData),
					},
					success: (res) => {
						console.log("添加成功！", res)
						DB.collection('shopcart01').
						doc(this.id).get({
							success: (res) => {
								console.log(res.data.run, "查询成功")
								this.list2 = res.data.run
							},
							fail: (res) => {
								console.log("查询失败")
							}
						})
						this.payShow = false
						this.currentSwiperIndex = 1
					},
					fail(res) {
						console.log("添加失败")
					}
				})
			},

			payFinish(index) {
				DB.collection('shopcart01').
				doc(this.id).get({
					success: (res2) => {
						console.log(res2.data.run[index], "查询成功")
						const _ = DB.command
						DB.collection('shopcart01').doc(this.id).update({
							data: {
								finish: _.push(res2.data.run[index]),
								run: _.pull({
									_id: _.eq(res2.data.run[index]._id)
								}),
							},
							success: (res) => {
								console.log("添加成功！", res)
								DB.collection('shopcart01').
								doc(this.id).get({
									success: (res) => {
										console.log(res.data.finish, "查询成功")
										this.list3 = res.data.finish
										this.list2 = res.data.run
										this.currentSwiperIndex = 2
									},
									fail: (res) => {
										console.log("查询失败")
									}
								})
							},
							fail(res) {
								console.log("添加失败")
							}
						})
					},
					fail: (res2) => {
						console.log("查询失败")
					}
				})

			},
			delect3(index){
				const _ = DB.command
				DB.collection('shopcart01').doc(this.id).update({
					data: {
						finish: _.pull({
							_id: _.eq(index)
						}),
					},
					success: (res) => {
						console.log("删除成功！", res)
						DB.collection('shopcart01').doc(this.id)
							.get({
								success: (res) => {
									this.list3 = res.data.finish
								},
								fail: (res) => {
									console.log("查询失败")
								}
							})
					},
					fail: (res) => {
						console.log("删除失败")
					}
				})
			},


			swiperSlider(event) {
				if (event.detail.current === 0) {
					// console.log("0", this.oldList1ScrollTop)
					this.swiperSliderHeight = 430 * this.list1.length + 100 + 'rpx'
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldList1ScrollTop, //滚动到目标位置
					})
				} else if (event.detail.current === 1) {
					// console.log("1", this.oldList2ScrollTop)
					this.swiperSliderHeight = 430 * this.list2.length + 100 + 'rpx'
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldList2ScrollTop, //滚动到目标位置
					})
				} else if (event.detail.current === 2) {
					// console.log("2", this.oldList3ScrollTop)
					this.swiperSliderHeight = 430 * this.list3.length + 100 + 'rpx'
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldList3ScrollTop, //滚动到目标位置
					})

				}
				this.currentSwiperIndex = event.detail.current
			},
			// 点击按钮实现切换效果
			swiperChange(index) {
				if (index === 0) {
					// console.log("0")
					this.swiperSliderHeight = 430 * this.list1.length + 100 + 'rpx'
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldList1ScrollTop, //滚动到目标位置
					})
				} else if (index === 1) {
					// console.log("1")
					this.swiperSliderHeight = 430 * this.list2.length + 100 + 'rpx'
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldList2ScrollTop, //滚动到目标位置
					})
				} else if (index === 2) {
					// console.log("2", this.oldList3ScrollTop)
					this.swiperSliderHeight = 430 * this.list3.length + 100 + 'rpx'
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldList3ScrollTop, //滚动到目标位置
					})
				}
				this.currentSwiperIndex = index
			},
		}
	}
</script>

<style lang="scss" scoped>
	.part1 {
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		top: 0;
		z-index: 2;
	}

	.part3 {
		width: 100%;
		height: 500rpx;
		background-color: #f3f4f7;
		position: absolute;
		top: 660rpx;
		z-index: 3;
		border-radius: 10px 10px 0px 0px;

		.part3-1 {
			width: 90%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			margin: auto;
			margin-top: 50rpx;
		}

		.part3-2 {
			width: 90%;
			height: 150rpx;
			text-align: center;
			margin: auto;
			border-bottom: 6rpx solid #FFFFFF;
		}

		.part3-3 {
			width: 90%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			margin: auto;
			line-height: 80rpx;

			text {
				color: #999999;
			}
		}

		image {
			width: 34rpx;
			height: 34rpx;
			padding: 10rpx;

		}

		button {
			width: 400rpx;
			height: 80rpx;
			background-color: #18B566;
			color: #FFFFFF;
		}
	}

	.paging {
		border-radius: 0px 0px 10px 10px;
		width: 750rpx;
		height: 100rpx;
		text-align: center;
		display: flex;
		flex-direction: row;
		background-color: #F0AD4E;

		.paging1 {
			width: 300rpx;
			height: 80rpx;
			font-size: 28rpx;
			text-align: center;
			font-family: PingFangSC-regular;
			margin-top: 20rpx;

			.fSize {
				font-size: 36rpx;
				font-weight: 600;
				color: #ff6c5f;
			}

			.fSize1 {
				font-size: 26rpx;
				color: #FFFFFF;
				font-weight: 600;
			}

			.span {
				width: 40rpx;
				height: 5rpx;
				line-height: 40rpx;
				border-radius: 10rpx;
				background-color: #FFFFFF;
				text-align: center;
				margin-left: 100rpx;
				margin-top: 20rpx;
			}

			.span1 {
				display: none;
			}
		}
	}


	.swiper-box {
		width: 750rpx;
		height: 1600rpx;
		position: absolute;
		top: 100rpx;

		z-index: 1;
	}

	.connent {
		width: 90%;
		height: 320rpx;
		margin: auto;
		margin-top: 20rpx;
		background-color: #74d2e7;
		border-radius: 20rpx;

		.user {
			height: 80rpx;
			display: flex;
			flex-direction: row;

			.userPic {
				width: 500rpx;
				height: 60rpx;
				border-radius: 50%;
				margin: 10rpx;
				display: flex;
				justify-content: space-between;
			}

			text {
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;
				margin-top: 20rpx;
			}
		}

		.product {
			height: 150rpx;
			display: flex;
			flex-direction: row;
			border-top: 4rpx solid #003666;

			.productPic {
				width: 150rpx;
				height: 150rpx;
				margin: 5px 20rpx;
				border-radius: 10rpx;

				.pic {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}
			}

			.productMsg {
				width: 500rpx;
				height: 120rpx;
				margin: 10rpx;

				.message1 text {
					font-size: 34rpx;
					font-weight: 600;
					color: #000000;
				}

				.message2 {
					margin-left: 50rpx;
					margin-top: 20rpx;

					text {
						font-size: 34rpx;
						font-weight: 600;
						color: #DD524D;
					}
				}
			}
		}

		.btn {
			width: 480rpx;
			height: 90rpx;
			display: flex;
			margin-left: 180rpx;

			button {
				height: 60rpx;
				width: 150rpx;
				background-color: #ffc168;
				font-size: 26rpx;
				font-weight: 400;
				margin-top: 10rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
